<template>
	<view>
		<view class="box">
			<view class="photo">
				<image src="../../static/exam.jpg" mode=""></image>
			</view>
			<view class="info">
				<view class="name">
					{{name}}
				</view>
				<view class="describe">
					描述：{{describe}}
				</view>
				<view class="bottombox">
					<view class="price">
						{{trading}}
					</view>
					<view class="delet" @click="toEvaluation">
						立即评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '全新四级真题',
				describe: '毕业了用不到，准备出，七成新',
				trading: '交易已完成'
			}
		},
		methods: {
			toEvaluation() {
				uni.navigateTo({
					url:'../evaluation/evaluation'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		display: flex;
		width: 90%;
		height: 140px;
		margin: 10px 5%;
		background-color: #f3faff;
		border-radius: 20px;
	}

	.photo {
		display: inline-block;
		width: 35%;
		height: 90%;
		margin: 2%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	}

	.info {
		display: inline-block;
		width: 55%;
		height: 100%;
		margin-left: 10px;
	}

	.name {
		text-align: center;
		margin-top: 12px;
		font-size: 18px;
		font-weight: 400;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.describe {
		font-size: 15px;
		color: #aeaeae;
		margin-top: 7px;
	}

	.bottombox {
		display: flex;
		margin: 15px 0 0 0;

		.price {
			display: inline-block;
			width: 150px;
			color: rgb(255, 85, 0);
			font-size: 18px;
			margin-top: 3px;
		}

		.delet {
			display: inline-block;
			width: 100px;
			height: 30px;
			line-height: 25px;
			background-color: #00a8cc;
			color: #fff;
			text-align: center;
			border-radius: 10px;
		}

	}

	.delet:active {
		// box-shadow: 0px 0px 0px 0px rgba(10, 16, 20, 0.24);
		transform: translateY(4px);
		box-shadow: none;

	}
</style>
